<script setup>
import Left from './views/Left/index.vue'
import Center from './views/Center/index.vue'
import Right from './views/Right/index.vue'
import { onBeforeUnmount, onMounted, ref } from 'vue';

/* 动态时间 start */
import dayjs from 'dayjs'
const nowTime = ref(dayjs().format('YYYY年MM月DD日 HH时mm分ss秒'))
let intervalId
onMounted(() => {
  intervalId = setInterval(() => {
    nowTime.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒')
  }, 1000)
})
onBeforeUnmount(() => {
  clearInterval(intervalId)
  window.removeEventListener('resize')
})
/* 动态时间 end */

/* 大屏适配 start */
const scale = ref(1)

/* 大屏适配 end */

function scalePage() {
  // 设计稿的宽高
  const draftWidth = 1366
  const draftHeight = 635
  // 得到当前屏幕的宽高
  const screnWidth = document.documentElement.clientWidth
  const screnHeight = document.documentElement.clientHeight

  // 根据宽高比, 修正scale
    // 如果当前屏幕的宽高比大于设计稿的宽高比, 根据高度来进行缩放, 让高度充满, 而宽高上有留白
    if (screnWidth/screnHeight > draftWidth/draftHeight) {
      scale.value = screnHeight/draftHeight
    } else {
      scale.value = screnWidth / draftWidth
    }
}

onMounted(() => {
  // 对屏幕进行适配
  scalePage()
  // 绑定屏幕尺寸改变的监听, 进行实时适配
  window.addEventListener('resize', scalePage)
})
</script>


<script>
export default {
  name: 'App'
}
</script>
<template>
  <div class="dashboard" :style="{transform: `scale(${scale})`}">
    <div class="header">
      <h1 class="title">数据大屏实时展示</h1>
      <span class="time">当前时间: {{ nowTime }}</span>
    </div>
    <div class="content">
      <div class="left">
        <Left></Left>
      </div>
      <div class="center">
        <Center></Center>
      </div>
      <div class="right">
        <Right></Right>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .dashboard {
    .header {
      height: 60px;
      background-image: url("./assets/head_bg.png");
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .title {
        font-size: 22px;
        color: #fff;
      }
      .time {
        position: absolute;
        right: 20px;
        top: 0;
        height: 60px;
        line-height: 60px;
        font-size: 12px;
        color: $text-color;
      }
    }

    .content {
      padding: 8px;
      display: flex;
      height: calc(100% - 60px);
      .left,.right {
        width: 340px;
      }
      .center {
        width: 650px;
        margin: 0 10px;
      }
    }
  }
</style>
